<template>
  <view class="login-bg">
    <image
      class="img-a"
      src="https://zhoukaiwen.com/img/loginImg/bg1.png"
    ></image>
    <view class="t-login">
      <view class="t-b">登 录</view>
      <form class="cl">
        <view class="t-a">
          <image src="https://zhoukaiwen.com/img/loginImg/user.png"></image>
          <input
            type="number"
            name="phone"
            placeholder="请输入角色名称"
            maxlength="11"
            v-model="phone"
          />
        </view>
        <button @tap="login()">注 册</button>
      </form>
    </view>
    <view class="cardBox">
      <view @click="getLogin"> 登录已有账号 </view>
    </view>
    <image
      class="img-b"
      src="https://zhoukaiwen.com/img/loginImg/bg2.png"
    ></image>
  </view>
</template>
<script>
import request from "@/common/request.js";
export default {
  data() {
    return {
      phone: "", //手机号码
      pwd: "", //密码
      openid: null,
    };
  },
  onLoad() {
    this.getOpenId();
  },
  methods: {
    getOpenId() {
      let that = this;
      uni.login({
        provider: "weixin",
        onlyAuthorize: true, // 微信登录仅请求授权认证
        success: function (event) {
          let opts = {
            url: "getOpenId",
            method: "post",
          };
          console.log(123123,event)
          request.httpRequest(opts, { scene: event.code }).then((res) => {
            console.log(res,"res")
            if (res.data.openid) {
              that.openid = res.data.openid;
            } else {
              console.log("数据请求错误～");
            }
          });
        },
        fail: function (err) {
          // 登录授权失败
          // err.code是错误码
        },
      });
    },
    //当前登录按钮操作
    login() {
      var that = this;
      if (!that.phone) {
        uni.showToast({ title: "请输入用户名", icon: "none" });
        return;
      }

      // uni.showToast({ title: "登录成功！", icon: "none" });

      let opts = {
        url: "register",
        method: "post",
      };
      request
        .httpRequest(opts, {
          openid: that.openid,
          type: "app",
          username: that.phone,
          password: 123456,
        })
        .then((res) => {
          if (res.data.code == 200) {
            uni.showToast({ title: "注册成功", icon: "success" });
            this.getLogin();
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
            });
          }
        });
    },
    getLogin() {
      var that = this;
      let opts = {
        url: "openlogin",
        method: "post",
      };
      request
        .httpRequest(opts, {
          openid: that.openid,
        })
        .then((res) => {
          if (res.data.code == 200) {
            uni.showToast({ title: "成功", icon: "success" });
            uni.setStorageSync("gameToken", res.data.token);
            uni.navigateTo({
              url: "./detail",
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
            });
          }
        });
    },
    //忘记密码
    forgotPwd() {
      uni.showToast({ title: "忘记密码", icon: "none" });
    },
  },
};
</script>
<style>
.img-a {
  width: 100%;
}
.img-b {
  width: 100%;
  height: 45px;
  bottom: 0;
  position: absolute;
}
.login-bg {
  height: 100vh;
  background: linear-gradient(to bottom, #ff6a9a, #fe7d76);
}

.t-login {
  width: 700rpx;
  padding: 55rpx;
  margin: 0 auto;
  font-size: 28rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  position: relative;
  margin-top: -100rpx;
  box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.15);
  z-index: 9;
}
.t-login button {
  font-size: 28rpx;
  background: linear-gradient(to right, #ff8f77, #fe519f);
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
}

.t-login input {
  padding: 0 20rpx 0 120rpx;
  height: 90rpx;
  line-height: 90rpx;
  margin-bottom: 50rpx;
  background: #f6f6f6;
  border: 1px solid #f6f6f6;
  font-size: 28rpx;
  border-radius: 50rpx;
}

.t-login .t-a {
  position: relative;
}

.t-login .t-a image {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: 40rpx;
  top: 28rpx;
}

.t-login .t-b {
  text-align: left;
  font-size: 46rpx;
  color: #ff939b;
  font-weight: bold;
  margin: 0 0 50rpx 20rpx;
}

.t-login .t-d {
  text-align: center;
  color: #999;
  margin: 80rpx 0;
}

.t-login .t-c {
  text-align: right;
  color: #c0c0c0;
  margin: -20rpx 30rpx 40rpx 0;
}

.t-login .t-f {
  text-align: center;
  margin: 200rpx 0 0 0;
  color: #666;
}

.t-login .t-f text {
  margin-left: 20rpx;
  color: #aaaaaa;
  font-size: 27rpx;
}

.t-login .uni-input-placeholder {
  color: #aeaeae;
}

.cl {
  zoom: 1;
}

.cl:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: "\20";
}
.cardBox {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 5rpx;
  background: #ffffff;
  opacity: 0.9;
  -webkit-border-radius: 20rpx;
  border-radius: 0 0 20rpx 20rpx;
  height: 70rpx;
  width: 600rpx;
  margin: 0 auto;
  position: relative;
  text-align: center;
  line-height: 70rpx;
  color: #aaa;
  font-size: 28rpx;
}
.cardBox .txt {
  margin-left: 10rpx;
}
</style>
